<!-- 佣金比例设置 -->
<template>
    <div >
        <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" style="max-width: 900px">
            <a-form-item label="平台分佣比例" help="例：设置1%，客户上传结算单发放完成金额为100万，则有100万*1% = 1万用于分佣，不设置则默认为0">
                <a-input v-model="config.platformRate" allow-clear placeholder="请输入平台分佣比例" suffix="%"/>
            </a-form-item>
            <a-form-item label="直推佣金比例（有上级）" help="例：平台产生1万用于分佣时，设置60%，则客户的直推用户将获得6000元佣金提成，不设置则默认为0">
                <a-input v-model="config.oneLevelRateHasParent" allow-clear placeholder="请输入直推佣金比例（有上级）" suffix="%"/>
            </a-form-item>
            <a-form-item label="直推佣金比例（无上级）" help="例：直推有上级时，按“直推佣金比例（有上级）”进行返佣，直推无上级时，按“直推佣金比例（无上级）”进行返佣若未设置，则默认按“直推佣金比例（有上级）”进行返佣">
                <a-input v-model="config.oneLevelRateNoParent" allow-clear placeholder="请输入直推佣金比例（无上级）" suffix="%"/>
            </a-form-item>
            <a-form-item label="间推佣金比例" help="例：平台产生1万用于分佣时，设置40%，则客户的间推用户将获得4000元佣金提成，不设置则默认为0">
                <a-input v-model="config.twoLevelRate" allow-clear placeholder="请输入间推佣金比例" suffix="%"/>
            </a-form-item>
            <a-form-item label="灵工服务费扣除比例" help="例：5%，则客户的实发佣金为扣除5%的服务费后的金额">
                <a-input v-model="config.serviceRate" allow-clear placeholder="请输入灵工服务费扣除比例" suffix="%"/>
            </a-form-item>
            <a-form-item label="客户仅首次结算产生佣金">
                <a-radio-group v-model="config.firstGrant" >
                    <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
                <div style="line-height: 20px">“是”，则客户仅第一次结算时，会给客户的直推以及间推分配佣金，客户以后交易将不再产生佣金；</div>
                <div style="line-height: 20px">“否”，则客户每产生结算时，都会给客户的直推以及间推分配佣金；</div>
            </a-form-item>
            <a-form-item v-bind="formItemLayoutWithOutLabel">
                <a-button type="primary" @click="update">保存</a-button>
            </a-form-item>
        </a-form>

        <a-modal 
            v-model="visible" 
            title="修改记录"
            width="70%"
            @ok="visible = false" 
            @cancel="visible = false">
            <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ total: total ,showSizeChanger: true,pageSize: size,}" size="small" >
                <div slot="updateAfterValue" slot-scope="updateAfterValue,record">
                    <div v-if="record.updateParam == 'first_grant'">{{updateAfterValue == 1 ? '是' : '否'}}</div>
                    <div v-else>{{updateAfterValue}}</div>
                </div>
                <div slot="createdBy" slot-scope="createdBy,record">
                    <div>{{record.updatedBy ?? createdBy}}</div>
                </div>
            </a-table>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { getAwardConfigDetail , saveAwardConfig , getAwardConfigRecord } from '@/api/services/share';
export default {
    data () {
        return {
            name: '',
            status: 1,
            statusList: [
                { id: 1, name: '是'},
                { id: 0, name: '否'},
            ],
            formItemLayoutWithOutLabel: {
                wrapperCol: {
                    xs: { span: 24, offset: 0 },
                    sm: { span: 24, offset: 16 },
                },
            },
            config: {
                platformRate: '', // 平台分佣比例
                oneLevelRateHasParent: '', // 直推分佣比例（有上级）
                oneLevelRateNoParent: '', // 直推分佣比例（无上级）
                twoLevelRate: '', // 间推分佣比例
                serviceRate: '', // 员工服务费比例
                firstGrant: 1
            },
            visible: false,
            dataList: [],
            isload: false,
            page: 1,
            size: 10,
            total: 0,
            columns,
        };
    },
    created(){
        this.getData();
    },
    methods: {
        // 获取数据
        getData(){
            let _this = this
            getAwardConfigDetail()
            .then(res=> {
                if(res.success){
                    _this.config = res.data;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 保存信息
        update(){
            let _this = this
            saveAwardConfig(_this.config)
            .then(res=> {
                if(res.success){
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: '保存成功',
                        duration: 8
                    })
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 获取推广设置修改记录
        async getConfigRecord(){
            // console.log('111')
            await this.getRecord();
            this.visible = true;
        },
        getRecord(){
            let _this = this;
            _this.isload = true;
            return new Promise((resolve,reject) => {
                const params = {
                    'pageSize': _this.size,
                    'pageIndex': _this.page,
                };
                getAwardConfigRecord(params)
                .then(res => {
                    _this.isload = false;
                    if(res.success){
                        _this.dataList = res.data;
                        _this.total = res.totalCount;
                        resolve();
                    }else{
                        _this.$notification['error']({
                            message: '温馨提示',
                            description: res.errMessage,
                            duration: 8
                        })
                    }
                })
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getRecord()
        },
    }
}

</script>
<style scoped>

</style>